<template>
    <div class="page">
        <div class="left">
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"
                :expand-on-click-node="false" @node-contextmenu="handleNodeContext" node-key="id" ref="elTree"></el-tree>
        </div>
        <div class="right">
            <div class="content" v-if="selectObj">
                <el-form ref="form" :model="selectObj" label-width="80px">
                    <el-form-item label="id" v-if="selectObj.iid">
                        <el-input v-model="selectObj.iid" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单名称">
                        <el-input v-model="selectObj.fun_name"></el-input>
                    </el-form-item>
                    <el-form-item label="URL">
                        <el-input v-model="selectObj.fun_url"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-input v-model="selectObj.fun_img"></el-input>
                    </el-form-item>
                    <el-form-item label="顺序">
                        <el-input v-model="selectObj.sort_code"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" v-model="selectObj.remarks"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

import { createNamespacedHelpers } from 'vuex';

const mm = createNamespacedHelpers(
    "ddmg/menuManage"
);


export default {
    data() {
        return {
            selectObj: "", // 选择数据
            rightPoint: "", // 右击数据
            defaultProps: {
                children: 'children',
                label: 'text'
            },
            contextMenuData: [
                {
                    label: "新增",
                    icon: "iconfont el-icon-edit-outline",
                    onClick: () => {
                        this.opreate('1');
                    },
                },
                {
                    label: "删除",
                    icon: "icon el-icon-top",
                    onClick: (data) => {
                        this.opreate('2', data);
                    },
                },
                {
                    label: "展开",
                    icon: "icon el-icon-bottom",
                    onClick: () => {
                        this.opreate('3');
                    },
                },
                {
                    label: "折叠",
                    icon: "icon el-icon-plus",
                    //divided: true,
                    onClick: () => {
                        this.opreate('4');
                    },
                },
            ],
        }
    },
    computed: {
        ...mm.mapState(['treeData'])
    },
    mounted() {
        this.initData()
    },
    methods: {
        ...mm.mapActions(['initData', 'getSelectData', 'saveData', 'deleteMenu']),
        handleNodeClick(e) {
            console.log(e)
            this.getSelectData({ iid: e.iid }).then(res => {
                this.selectObj = res
            })
        },
        handleNodeContext(e, data, node, element) {
            this.rightPoint = {
                e, data, node, element
            }
            console.log(e)
            let arr = this.contextMenuData
            if (data.level == '4') {
                arr = [
                    {
                        label: "删除",
                        icon: "icon el-icon-top",
                        onClick: (data) => {
                            this.opreate('2', data);
                        },
                    },
                ]
            }
            this.$contextmenu({
                items: arr,
                event, // 鼠标事件信息
                customClass: 'custom-class', // 自定义菜单 class
                zIndex: 3, // 菜单样式 z-index
                minWidth: 230 // 主菜单最小宽度
            });
            this.$nextTick(() => {
                const ele = document.querySelector('.custom-class');
                ele.style.position = 'fixed';
                ele.style.top = `${e.clientY}px`;
                ele.style.left = `${e.clientX + 10}px`;
            })
        },
        opreate(type) {
            console.log(this.rightPoint, this.$refs.elTree)
            if (type == '1') {
                // add
                this.selectObj = {
                    fun_name: "",
                    fun_url: "",
                    fun_img: "",
                    sort_code: "",
                    parentid: this.rightPoint.data.id,
                    remarks: "",
                }
            } else if (type == '2') {
                // delete
                this.$confirm('此操作将永久删除这个菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMenu({iid: this.rightPoint.data.iid}).then(res => {
                        this.$message({
                            message: "已删除",
                            type: 'success'
                        })
                    })
                }).catch(() => {
                    
                });
            } else if (type == '3') {
                // 展开
                const node = this.$refs.elTree.getNode(this.rightPoint.data.id)
                node.expanded = true
            } else if (type == '4') {
                // 收起
                const node = this.$refs.elTree.getNode(this.rightPoint.data.id)
                node.expanded = false
            }
        },
        onSubmit() {
            this.saveData(this.selectObj).then(res => {
                this.selectObj = ""
                this.$message({
                    message: this.selectObj.iid ? "修改成功" : "新增成功",
                    type: 'success'
                })
            })
        },
        onReset() {
            if (this.selectObj.iid) {
                // 修改初始化
                this.getSelectData({ iid: this.selectObj.iid }).then(res => {
                    this.selectObj = res
                })
            } else {
                this.selectObj = {
                    fun_name: "",
                    fun_url: "",
                    fun_img: "",
                    sort_code: "",
                    parentid: this.rightPoint.data.id,
                    remarks: "",
                }
            }
        },
    }
}


</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: row;

    .right {
        flex: 1;
        padding-right: 20px;
    }

    .left {
        width: 400px;
        height: 60vh;
        overflow: auto;
    }
}
</style>